const CELL_WIDTH = 100; 		//方块大小
const CELL_BORDER = 1; 			//方块边框线宽
var clock = null; 				//定时器
var speed = 5; 					//下落速度

//游戏状态,0:游戏未开始；1：正在游戏;2:游戏结束
var gameStatus = 0;

//二维数组记录对应位置方块状态
// 0-表示白块
// 1-表示黑块
// -1  表示白块被单击
// -2  表示黑块被单击
var map = new Array(5);
var score = 0; //玩家得分


addLoadEvent(prepareClick);

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

//游戏开始按钮版绑定单击事件
function prepareClick() {
	var startBtn = document.getElementById("start");
	startBtn.addEventListener("click", start);
}


//开始游戏
function start() {
	if (gameStatus === 0) { //未进行游戏，初始化
		init();
	} else if (gameStatus === 1) { //正在进行游戏
		alert('游戏已经开始，无须再次点击!');
	}
}

//初始化
function init() {
	initDate(); 			//初始化下落速度等数据
	initMapData(); 			//初始化记录方块状态的二维数组
	createMap(); 			//生成方块
	updateScore(); 			//更新得分信息

	//创建定时器
	clock = window.setInterval('move()', 30);
}


//初始化下落速度、游戏状态和得分数据
function initDate() {
	speed = 5;
	gameStatus = 1;
	score = 0;
}

//更新得分信息
function updateScore() {
	var scoreElem = document.getElementById("score");
	scoreElem.firstChild.nodeValue = score;
}

//初始化记录方块状态的二维数组
function initMapData() {
	for (var i = 0; i < map.length; i++) {
		if (!(map[i] instanceof Array)) { //第一次开始游戏，创建数组map[i]，后续不用再重新创建
			map[i] = new Array(4)
		}
		for (var j = 0; j < map[i].length; j++) { //初始化为白块
			map[i][j] = 0;
		}
		randomBlack(map[i]); //一行中随即生成一个黑块
	}
}

//一行中随即生成一个黑块
function randomBlack(row) {
	var i = Math.floor(Math.random() * 4);
	row[i] = 1;
}

//生成方块
function createMap() {
	var con = document.getElementById("con");
	var rowCont;
	var cell;
	
	while (con.firstChild) {//再次开始游戏时，删除上一次遗留的所有子结点
		con.removeChild(con.firstChild);
	}
	
	for (var i = 0; i < map.length; i++) {
		rowCont = createElemClass('div', 'row');
		for (var j = 0; j < map[i].length; j++) {
			if (map[i][j] === 1) {//是黑快
				cell = createElemClass('div', 'cell black');
			} else if (map[i][j] === 0 || map[i][j] === -2) {//是白块或点击后的黑块
				cell = createElemClass('div', 'cell');
			} else if (map[i][j] === -1) {//是点击后的白块
				cell = createElemClass('div', 'cell error');
			}
			//将数组元素的下标设置相应的标签中
			cell.setAttribute("row", i);
			cell.setAttribute("col", j);
			
			//绑定单击事件
			cell.addEventListener("click", cellClick);
			rowCont.appendChild(cell);
		}
		con.appendChild(rowCont);
	}
	con.style.top = (CELL_WIDTH + 2 * CELL_BORDER) * 4 * -1 + "px";
}

//方块的单击事件处理程序
function cellClick() {

	if (gameStatus === 1) {//正在游戏
		var row = event.target.getAttribute("row");
		var col = event.target.getAttribute("col");
		if (map[row][col] === 0) {//点击了白块
			map[row][col] = -1;
			event.target.className = "cell error";
			gameStatus = 2;
			over();
		} else if (map[row][col] === 1) {//点击了黑快
			map[row][col] = -2
			event.target.className = "cell";
			incScore();
		}
	} else if(gameStatus===2) {
		alert("游戏已结束请重新开始！");
	}
}

//增加得分
function incScore() {
	score++;
	if (score % 10 === 0) { //每得10分，下落速度加1
		speedup();
	}
	updateScore();
}

//生成行上的4个小块
function createRow(row) {

	var rowCont = createElemClass('div', 'row');
	var cell;
	for (var i = 0; i < row.length; i++) {
		if (row[i] === 1) {
			cell = createElemClass('div', 'cell black');
		} else if (row[i] === 0) {
			cell = createElemClass('div', 'cell error');
		}
		rowCont.appendChild(cell);
	}

	return rowCont;
}

//下落处理
function move() {

	isOver();
	var con = document.getElementById("con");
	var top = parseInt(window.getComputedStyle(con, null)['top']);

	top += speed;
	con.style.top = top + "px";
	handelRow(top);

}

//判断是否结束
function isOver() {
	for (var i = 0; i < map.length; i++) {//遍历数组，判断是否点击了白块
		for (var j = 0; j < map[i].length; j++) {
			if (map[i][j] === -1) {
				gameStatus = 2;
				break;
			}
		}
	}

	var con = document.getElementById("con");
	var top = parseInt(window.getComputedStyle(con, null)['top']);
	if (top >= -102) {//最后一行已到底
		for (var x = 0; x < map[map.length - 1].length; x++) {//判断最后一行是否有黑块
			if (map[map.length - 1][x] == 1) {
				gameStatus = 2;
			}
		}
	}

	if (gameStatus === 2) {
		over();
	}
}

//结束处理
function over() {
	freeData();
	showOver();
}

//清除定时器
function freeData() {
	clearInterval(clock);
	gameStatus = 0;
}

//处理最后一行
function handelRow(top) {
	if (top >= 0) {
		
		//最后一行数组元素出栈（删除）
		map.pop();
		
		//生成一行新的元素
		var row = new Array(4);
		for (var i = 0; i < row.length; i++) {
			row[i] = 0;
		}
		randomBlack(row);
		
		//反向入队（从数组头部添加元素）
		map.unshift(row);
		
		//依据map数组重新生成结点
		createMap();

		var con = document.getElementById("con");
		con.style.top = "-102px";

	}
}

//创建元素结点对象
//元素结点标签为eleName，类为className
function createElemClass(elemName, className) {
	var elem = document.createElement(elemName);
	elem.className = className;
	return elem;
}

//下载速度值加1
function speedup() {
	speed += 1;
}

//显示优秀结束
function showOver() {
	alert("游戏结束！");
}
